<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>帐号设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <th:block th:include="common/link::link"></th:block>

</head>
<body>
<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>
<div class="main fly-user-main layui-clear">
    <th:block th:include="common/left::left"></th:block>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pass">密码</li>
                <!--<li lay-id="bind">帐号绑定</li>-->
                <li lay-id="support">赞赏</li>
                <li lay-id="store">图床</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <form method="post">
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_username" name="username" required lay-verify="required"
                                       autocomplete="off" th:value="${setInfo.nickName}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="1" title="男" checked="">
                                <input type="radio" name="sex" value="2" title="女">
                                <input type="radio" name="sex" value="0" title="未知">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_email" class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_email" name="email"
                                       autocomplete="off" th:value="${setInfo.email}" class="layui-input">
                            </div>
                <!--            <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需
                                <a href="#" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>
                            </div>-->
                        </div>
                        <div class="layui-form-item">
                            <label for="phone" class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" id="phone" name="phone"
                                       autocomplete="off" th:value="${setInfo.phone}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="company" class="layui-form-label">公司</label>
                            <div class="layui-input-inline">
                                <input type="text" id="company" name="company" autocomplete="off"
                                       th:value="${setInfo.company}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label for="L_sign" class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="sign" autocomplete="off"
                                          th:text="${setInfo.sign}" class="layui-textarea"
                                          style="height: 80px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-filter="base-info" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-form-item">
                        <div class="avatar-add">
                            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过30KB</p>
                            <div class="upload-img">
                                <input type="file" name="file" id="avatar-file" lay-title="上传头像">
                            </div>
                            <img id="avatar-info" src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
                                 th:src="${setInfo.avatar}">
                            <span class="loading"></span>


                        </div>
                    </div>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <form action="/user/repass" method="post">
                        <div class="layui-form-item">
                            <label class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="nowpass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_pass" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_pass" name="pass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_repass" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_repass" name="repass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-filter="new-password" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>

                <!--                <div class="layui-form layui-form-pane layui-tab-item">
                                    <ul class="app-bind">
                                        <li class="fly-msg app-havebind">
                                            <i class="iconfont icon-qq"></i>
                                            <span>已成功绑定，您可以使用QQ帐号直接登录</span>
                                            <a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>

                                            &lt;!&ndash; <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
                                            <span>，即可使用QQ帐号登录Fly社区</span> &ndash;&gt;
                                        </li>
                                        <li class="fly-msg">
                                            <i class="iconfont icon-weibo"></i>
                                            &lt;!&ndash; <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
                                            <a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a> &ndash;&gt;

                                            <a href="" class="acc-weibo" type="weibo_id"
                                               onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})">立即绑定</a>
                                            <span>，即可</span>
                                        </li>
                                    </ul>
                                </div>-->

                <div class="layui-form layui-form-pane layui-tab-item">
                    <form action="" method="post">
                        <div class="layui-form-item">
                            <label for="supportWord" class="layui-form-label">赞赏语</label>
                            <div class="layui-input-inline">
                                <input type="text" id="supportWord" name="supportWord" required lay-verify="required"
                                       th:value="${setInfo.supportWord}"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-primary" id="qrcode">上传二维码</button>
                            <div class="layui-upload-list">
                                <input type="hidden" id="supportQrcode" name="supportQrcode"
                                       th:value="${setInfo.supportQrcode}">
                                <img class="layui-upload-img" id="demo1" height="300px" width="300px" src="../../../static/images/default/qrcode-default.png"
                                     th:src="${setInfo.supportQrcode}">
                                <p id="demoText"></p>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-filter="upload-qrcode" lay-submit>保存</button>
                        </div>
                    </form>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <form>
                                <div class="layui-form-item">
                                    <label for="ak" class="layui-form-label">accessKey</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="ak" name="ak" required
                                               lay-verify="required" th:value="${settingStore} ? ${settingStore.ak} : ''"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="sk" class="layui-form-label">secretKey</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="sk" name="sk" required
                                               lay-verify="required" th:value="${settingStore} ? ${settingStore.sk} : ''"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="bucket" class="layui-form-label">bucket</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="bucket" name="bucket" required lay-verify="required"
                                               autocomplete="off" class="layui-input" th:value="${settingStore} ? ${settingStore.bucket} : ''">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="domain" class="layui-form-label">domain</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="domain" name="domain" required lay-verify="required"
                                               autocomplete="off" class="layui-input" th:value="${settingStore} ? ${settingStore.domain} : ''">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">平台</label>
                                    <div class="layui-input-inline">
                                        <select name="store_type" required>
                                            <option value="七牛" selected="">七牛</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button class="layui-btn" key="set-mine" lay-filter="img-bed" lay-submit>确认</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-col-md6">
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>设置图床</legend>
                            </fieldset>
                            <ul class="layui-timeline">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">方式一</h3>
                                        <p>
                                            对本站任意赞助，可获得试用我们提供的图床，不必再设置（备注你的账号）。
                                        </p>
                                        <img src="../../../static/images/wxpay.jpeg"
                                                width="300px" height="420px"/>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">方式二</h3>
                                        <ul>
                                            <li><img
                                                    src="../../../static/images/qiniu/qiniu-step1.png"
                                                    width="400px" height="300px"/></li>
                                            <li><img
                                                    src="../../../static/images/qiniu/qiniu-step2.png"
                                                    width="400px" height="300px"/></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</div>
<script th:inline="javascript">

    $("li").removeClass("layui-this");
    $("#fly-set").addClass("layui-this")

    layui.use(['util', 'element', 'layer', 'form', 'laytpl', 'laypage', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;  //表单的依赖
        var laypage = layui.laypage;//分页的依赖
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块

        //右下角bar top
        util.fixbar({
            bar1: true,
            click: function (type) {
                console.log(type);
                if (type === 'bar1') {
                }
            }
        });


        form.on('submit(base-info)', function (data) {
            update(jQuery.parseJSON(JSON.stringify(data.field)),"../user/info");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(new-password)', function (data) {
            console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}
            update(jQuery.parseJSON(JSON.stringify(data.field)),"../user/pass");
            return false;
        });
        form.on('submit(upload-qrcode)', function (data) {
            update(jQuery.parseJSON(JSON.stringify(data.field)),"../user/info");
            return false;
        });
        form.on('submit(img-bed)', function (data) {
            console.log(data.field);
            update(jQuery.parseJSON(JSON.stringify(data.field)),"../setting/store");
            return false;
        });

        //普通图片上传
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#qrcode',
            url: '../local/upload?type=4',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    //$('#demo1').attr('src', result); //图片链接（base64）
                    layer.msg("上传中，请稍后");
                });
            },
            done: function (res) {
                //上传成功
                if (res.code == 200) {
                    layer.msg("上传成功啊");
                    $("#supportQrcode").val(res.data);
                    $('#demo1').attr('src', res.data);
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        //绑定原始文件域
        upload.render({
            elem: '#avatar-file',
            url: '../local/upload?type=1',
            done: function (res) {
                res.toJSON = function (key) {
                    var replacement = new Object();
                    for (var val in this) {
                        if (typeof (this[val]) === 'string')
                            replacement[val] = this[val].toUpperCase();
                        else
                            replacement[val] = this[val]
                    }
                    return replacement;
                };

                var jsonText = JSON.stringify(res);
                console.log("头像上传：" + jsonText);
                var userId = new String('[[${session.user.userId}]]');
                $.post("../user/info", {"userId": userId, "avatar": res.data}, function (result) {
                    $("#avatar-info").attr("src", res.data);
                },"json");
            }
        });

    });

    function update(field,url) {
        $.ajax({
            url: url,
            data: field, //要提交的数据是一个JSON
            type: "POST", //提交方式
            dataType: "json", //返回数据的类型
            success: function (data) { //回调函数 ,成功时返回的数据存在形参data里
               if(data.code == 200){
                   layer.msg("修改成功");
               }
            }
        });
    }


</script>

</body>
</html>